<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- import CSS -->
  <link href="./css/index.css" />
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入 Vue -->

  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app" style="width: 1161px">
    <el-row>
      <div style="float: left">
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[0].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(0)" id="bplist0">
          {{herodata[0].hero}}
          
          </div>
            <div style="text-align: center;">
                <el-button type="button" @click="close(0)" v-if="herodata[0].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
                <el-button type="button" @click="open(0)"style="background: #1a2a3a; " v-else >解锁</el-button>
            </div>
        </div>
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[2].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(2)" id="bplist2" >
          {{herodata[2].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(2)" v-if="herodata[2].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(2)" style="background: #1a2a3a;" v-else>解锁</el-button>
        </div>
        </div>
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[5].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(5)" id="bplist5">
          {{herodata[5].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(5)" v-if="herodata[5].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(5)" style="background: #1a2a3a;"v-else>解锁</el-button>
        </div>
        </div>
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[7].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(7)" id="bplist7">
          {{herodata[7].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(7)" v-if="herodata[7].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(7)"style="background: #1a2a3a;" v-else>解锁</el-button>
        </div>
        </div>  
      </div>


      <div style="float: right">
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[6].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(6)" id="bplist6">
          {{herodata[6].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(6)" v-if="herodata[6].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(6)" style="background: #1a2a3a;"v-else>解锁</el-button>
        </div>
        </div>
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[4].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(4)" id="bplist4">
          {{herodata[4].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(4)" v-if="herodata[4].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(4)"style="background: #1a2a3a;" v-else>解锁</el-button>
        </div>
        </div>
        <div style="display: inline-block;">
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[3].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(3)" id="bplist3">
          {{herodata[3].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(3)" v-if="herodata[3].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(3)" style="background: #1a2a3a;"v-else>解锁</el-button>
        </div>
        </div> 
        <div style="display: inline-block;"> 
          <div
          :style="'border:1px solid  #fff;background-image:url(./img/honorkings/heros/'+herodata[1].hero+'.jpg);background-size:62px 62px; text-shadow: 1px 1px black;color:white;width:62px;height:62px;font-size:15px;margin-left:15px'"
          @click="divclick(1)" id="bplist1">
          {{herodata[1].hero}}
          </div>
          <div style="text-align: center;">
            <el-button type="button" @click="close(1)" v-if="herodata[1].suoding==0" style="color: #fff;background: #148170;">锁定</el-button>
            <el-button type="button" @click="open(1)" style="background: #1a2a3a;" v-else>解锁</el-button>
        </div>
        </div>
      </div>
    </el-row>
    <el-row> 
      <el-col :span="5">
        <div class="grid-content bg-purple" style="width: 242px">
          <p style="background-color: blue;text-align: center; color:white;">蓝方</p>
        </div>
        <div class="grid-content" id="pick">
          <div v-for="(data,idx) in herodata" v-if="idx <13 && idx>7 " :key="idx"
            style="height: 50px;background-color: bisque;margin-bottom: 10px;border:1px solid  #fff" draggable="true"
            @dragstart="dragstart(idx)" :id="'bplist'+idx" @dragover.prevent @drop="drop(idx)" @click="divclick(idx)">
            {{data.playername}}-
            <img :src="'./img/honorkings/heros/'+data.hero+'.jpg'" style="width: 50px" />
            <el-popover placement="right" width="225" trigger="click" v-model="visible[0][idx]">
              <div v-for="datas in skilljson" style="width: 45px; height: 60px; display: inline-block"
                @click="skillck(idx,datas)">
                <img :src="'./img/honorkings/summoner/'+datas+'.jpg'" style="width: 30px" />
                {{datas}}
                
              </div>

              <img slot="reference" :src="'./img/honorkings/summoner/'+data.skill+'.jpg'" style="width: 30px" />
              
            </el-popover>
            <el-button style="position: absolute; color: #fff; background: #148170;margin-top: 11px;" type="button" @click="close(idx)" v-if="herodata[idx].suoding==0">锁定</el-button>
            <el-button style="position: absolute; background: #1a2a3a;;" type="button" @click="open(idx)" v-else>解锁</el-button>

          </div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light" style="height: 43px; text-align: center">
          <button @click="herotype=0">全部</button>
          <button @click="herotype=1">战士</button>
          <button @click="herotype=3">坦克</button>
          <button @click="herotype=2">法师</button>
          <button @click="herotype=4">刺客</button>
          <button @click="herotype=5">射手</button>
          <el-select v-model="sooname" filterable placeholder="请选择">
            <el-option v-for="(item,idx) in herojson" :key="idx" :label="item.cname" :value="item.ename"
              v-if="item.show==true">
              <img :src="'./img/honorkings/heros/'+item.ename+'.jpg'" style="width: 20px" />
              <span>{{item.cname}}</span>
            </el-option>
          </el-select>
          <button @click="herotype=sooname">确定</button>
        </div>
        <div style="width: 677px; height: 300px; overflow: auto">
          <div class="grid-content bg-purple-light" style="width: 100%">
            <div class="button"
              style="font-size:8px;width: 55px;  height:55px; float: left;background-image:url(./img/honorkings/heros/0.jpg);background-size:55px 55px; text-shadow: 1px 1px black;color:white;"
              @click="selecthero(999)">

              {{herodata.ename}}
            </div>

            <div class="button"
              :style="'font-size:8px;width: 55px;  height:55px; float: left;background-image:url(./img/honorkings/heros/'+hero.cname+'.jpg) ;background-size:55px 55px; text-shadow: 1px 1px black;color:white'"
              v-for="(hero,idx) in herojson" :key="idx"
              v-if="hero.show==true &&(herotype==0 || hero.hero_type==herotype|| hero.hero_type2==herotype||herotype==hero.ename)"
              @click="selecthero(idx)">
              {{hero.cname}}

            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple" style="width: 242px">
          <p style="background-color: red;text-align: center; color: white;">红方</p>
        </div>
        <div class="grid-content" id="pick">
          <div v-for="(data ,idx) in herodata" v-if="idx>12" :key="idx"
            style="height: 50px;background-color: bisque;margin-bottom: 10px;border:1px solid  #fff" draggable="true"
            @dragstart="dragstart(idx)" :id="'bplist'+idx" @dragover.prevent @drop="drop(idx)" @click="divclick(idx)">
            
            <el-popover placement="right" width="225" trigger="click" v-model="visible[1][idx]">
              <div v-for="datas in skilljson" style="width: 45px; height: 60px; display: inline-block"
                @click="skillck(idx,datas)">
                <img :src="'./img/honorkings/summoner/'+datas+'.jpg'" style="width: 30px" />
                {{datas}}
                
              </div>

              <img slot="reference" :src="'./img/honorkings/summoner/'+data.skill+'.jpg'" style="width: 30px;float: left;margin-top: 20px;margin-right: 5px;" />
              
            </el-popover>
            
            <img :src="'./img/honorkings/heros/'+data.hero+'.jpg'" style="width: 50px; float: left;" />
            <el-button type="button" @click="close(idx)"  v-if="herodata[idx].suoding==0" style="color: #fff;background: #148170; margin-top: 10px; margin-left: 5px;">锁定</el-button>
            <el-button type="button" @click="open(idx)" style="background: #1a2a3a;;margin-left: 5px;" v-else>解锁</el-button>
            <span style="float: right">-{{data.playername}}</span>

          </div>
        </div>
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 100px;">
      <div style="width: 200px; display: inline-block">
        <el-form-item label="上单" required>
          <el-input v-model="form[0]"></el-input>
        </el-form-item>
      </div>
      <div style="width: 200px; display: inline-block">
        <el-form-item label="打野" required>
          <el-input v-model="form[1]"></el-input>
        </el-form-item>
      </div>
      <div style="width: 200px; display: inline-block">
        <el-form-item label="中单" required>
          <el-input v-model="form[2]"></el-input>
        </el-form-item>
      </div>
      <div style="width: 200px; display: inline-block">
        <el-form-item label="边路" required>
          <el-input v-model="form[3]"></el-input>
        </el-form-item>
      </div>
      <div style="width: 200px; display: inline-block">
        <el-form-item label="辅助" required>
          <el-input v-model="form[4]"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="红蓝方" required>
        <el-switch style="display: block;margin-top: 8px;" v-model="form[5]" inactive-color=blue active-color=red inactive-text="蓝方"
          active-text="红方">
        </el-switch>
      </el-form-item>
    </el-form>
   
    <button @click="subs" style="width: 100px; height: 50px;">提交</button>
    <button @click="clean" style="width: 100px; height: 50px; float: right;">清除数据</button>

  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        form: ["", "", "", "", "", false],
        sooname: null,
        herodata: [
          { playername: "玩家1", hero: "0", skill: "治疗" ,suoding:0},
          { playername: "玩家2", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家3", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家4", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家5", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家6", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家7", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家8", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家09", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家10", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家11", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家12", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家13", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家14", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家15", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家16", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家17", hero: "0", skill: "治疗"  ,suoding:0},
          { playername: "玩家18", hero: "0", skill: "治疗"  ,suoding:0},
        ],
        skilljson: [
          "沉默", "惩戒", "干扰", "疾跑", "净化", "狂暴", "闪现", "虚弱", "斩杀", "治疗",
        ],
        src: null,
        herojson: {},
        herotype: 0,
        all: {},
        activepos: {
          pos: "999",
          hero: "",
          skill: "",
        },
        visible: [
          [false, false, false, false, false],
          [false, false, false, false, false],
        ],
      };
      showcom: false
    },
    mounted() {
      axurl = "http://10.0.4.6:800/api/honorkingsbp.php?get"
      axios.get(axurl).then((res) => {
        if (res.data.errcode == 0) {
          for (var i in res.data.data) {
            // console.log(i)
            if (res.data.data[i].hero == '') {
              this.herodata[i].hero = 0
            } else {
              this.herodata[i].hero = res.data.data[i].hero
            }

            this.herodata[i].playername = res.data.data[i].player
            this.herodata[i].skill = res.data.data[i].skill
          }
          axios.get("./herolist.json").then((res) => {
            this.herojson = res.data;
            for (i in this.herojson) {
              this.herojson[i]["show"] = true;
              for (var j in this.herodata){
                if (this.herodata[j].hero==this.herojson[i].cname){
                  this.herojson[i].show=false

                }
              }
              if (!this.herojson[i]["hero_type2"]) {
                this.herojson[i]["hero_type2"] = 0;
              }

            }
          });
        }
      });
    },
    methods: {
      dragstart: function (val) {
        console.log(val);
        this.activepos.pos = val;
        this.activepos.hero = this.herodata[val]["hero"];
        this.activepos.skill = this.herodata[val]["skill"];
        console.log(this.herodata[val]);
      },
      drop: function (dst) {
        console.log(dst);
        this.herodata[this.activepos.pos]["hero"] = this.herodata[dst]["hero"];
        this.herodata[this.activepos.pos]["skill"] = this.herodata[dst]["skill"];
        this.herodata[dst]["hero"] = this.activepos.hero;
        this.herodata[dst]["skill"] = this.activepos.skill;
        this.sub(this.activepos.pos, this.herodata[this.activepos.pos])
        this.sub(dst, this.herodata[dst])
        this.activepos.pos = 999;
        this.activepos.hero = 0;
        this.divclick(999);

      },

      divclick: function (idx) {
        if (idx != 999) {
          document.getElementById("bplist" + idx).style.border = "1px solid red";
          this.activepos.pos = idx;
          this.activepos.hero = this.herodata[idx]["hero"];
        }

        for (var i = 0; i < 18; i++) {
          if (i != idx)
            document.getElementById("bplist" + i).style.border = "1px solid  #fff";
        }
      },

      selecthero: function (val) {
        if(this.herodata[this.activepos.pos]['suoding']==1){
            this.$notify.warning({ title: "警告", message: "栏位已锁" });
          return;
        }
        
        if (this.activepos.pos == 999) {
          this.$notify.warning({ title: "警告", message: "未选择栏位" });
          return;
        }

        if (this.activepos.hero != 0) {
          for (i in this.herojson) {
            if (this.herojson[i].cname == this.activepos.hero) {
              this.herojson[i].show = true;
            }
          }
        }
        if (val == 999) {
          this.herodata[this.activepos.pos]["hero"] = "0";
          this.activepos.hero = "0";
        } else {
          this.herodata[this.activepos.pos]["hero"] = this.herojson[val]["cname"];
          this.herojson[val].show = false;
          this.activepos.hero = this.herojson[val]["cname"];
          // console.log(this.herodata.hero)
          this.sub(this.activepos.pos, this.herodata[this.activepos.pos])
        };
      },

      skillck: function (idx, val) {
        this.herodata[idx].skill = val;
        this.visible[0][idx] = false;
        this.visible[1][idx] = false;
        this.sub(this.activepos.pos, this.herodata[idx])

      },

      subs: function () {
        var axurl = "http://10.0.4.6:800/api/honorkingsbp.php?put";
        for (item in this.form) {
          if (item != 5) {
            pos = Number(item) + 8;
            if (this.form[5]) { pos = pos + 5; }
            postdata = "pos=" + pos + "&hero=" + encodeURIComponent('') + "&player=" + encodeURIComponent(this.form[item]) + "&skill=" + encodeURIComponent("治疗");
            axios.post(axurl, postdata).then((res) => {
              if (res.data.errcode != 0) {
                this.$notify.error({
                  title: "错误",
                  message: this.form[item] + "不正确",
                });
              }
            });

          }

        };
      },
      sub: function (pos, val) {
        postdata = "pos=" + pos + "&hero=" + encodeURIComponent(val.hero) + "&player=" + encodeURIComponent(val.playername) + "&skill=" + encodeURIComponent(val.skill);
        axios.post('http://10.0.4.6:800/api/honorkingsbp.php?put', postdata).then(
          res => {
            console.log(res.data)

          }
        )
      },
      clean: function () {
        var axurl = "http://10.0.4.6:800/api/honorkingsbp.php";
        postdata = "init=35677"
        axios.post(axurl, postdata).then((res) => {
          if (res.data.errcode != 0) {
            this.$notify.error({
              title: "错误",
              message: "初始化失败",
            });
          } else {
            this.$notify.success({
              title: "成功",
              message: "初始化成功",
            });
          }
        });

      },
      close:function(val){
       this.herodata[val]["suoding"]=1;

       
      },
      open:function(val){
        this.herodata[val]["suoding"]=0;
      },

    },
  });
</script>
</html>